<script setup lang="ts">
import { onMounted,ref } from 'vue'
import { useTabStore } from '@/store/tab';
import { useMainStore } from '@/store/index'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
  DataZoomComponent
} from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { getchartInfo as getchartInfoApi } from '@/api/tab';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  DataZoomComponent
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
>;

const tabStore = useTabStore();
const store = useMainStore()
const townName = ref<any>([])
const townArea = ref<any>([])
const townRate = ref<any>([])
const townflag = ref<boolean>(true)
const villageName = ref<any>([])
const villageArea = ref<any>([])
const villageRate = ref<any>([])

onMounted(async() => {
  await getchartInfoApi(tabStore.townName).then(res => {
      res.forEach(element => {
        townName.value.push(element.name)
        townArea.value.push((element.area/666.67).toFixed(2))
        townRate.value.push(element.rate)
      });
      let dom = document.getElementById('container3');
      let myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });

      let option: EChartsOption = {
        title: {
          text: '射阳各镇流转土地面积图'
        },
        grid: {
          left: '15%',
        },
        xAxis: {
          type: 'value',
          name: "亩",
        },
        yAxis: {
          type: 'category',
          data: townName.value,
          axisTick: {
              alignWithLabel: true
          },
          axisLabel: {
              interval:0,
              formatter: function (value, index) {
                return value + '\n{rate|' + townRate.value[index] + '}' ;
              },
              rich: {
                rate: {
                    fontWeight : 600,
                    // fontSize: 15,
                    lineHeight:18
                }
              }
          }
        },
        series: [{
            data: townArea.value,
            type: 'bar',
            label: {
                show: true, // 显示标签
                position: 'right', // 标签的位置
                // 可以通过 formatter 自定义标签的内容
                formatter: '{c}' // {c} 表示数据值
            }
        }],
        dataZoom: [{ // 这部分是滚动条
          type: 'slider', // 使用 'slider' 类型的 dataZoom 组件
          start: 0, // 左侧在数据窗口范围的起始百分比, 0 表示从头开始
          end: 100 // 右侧在数据窗口范围的结束百分比, 100 表示到尾部结束
        }]
      };
      myChart.setOption(option);
      // 监听柱状图的点击事件
      myChart.on('click', function (params) {
          let loading = ElLoading.service({ text: "正在加载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
          townflag.value = false
          villageName.value=[]
          villageArea.value=[]
          villageRate.value=[]
          // 计算 barWidth 的值
          getchartInfoApi({townName:params.name}).then(arr => {
            arr.forEach(element => {
              villageName.value.push(element.name)
              villageArea.value.push((element.area/666.67).toFixed(2))
              villageRate.value.push(element.rate)
            });
            let barWidth = Math.min(Math.max(50 / villageName.value.length, 10), 150);
            let dom = document.getElementById('container4');
            let myChart = echarts.init(dom, null, {
              renderer: 'canvas',
              useDirtyRect: false
            });

            let option: EChartsOption = {
              // dataZoom: [
              //   {
              //     id: 'dataZoomY',
              //     type: 'slider',
              //     yAxisIndex: [0],
              //     filterMode: 'empty',
              //     start: 0,
              //     end: 40,
              //     left: '93%',
              //     width:15,
              //     textStyle:{
              //       width:15,
              //       overflow:'break'
              //     }
              //   }
              // ],
              title: {
                text: params.name + '各村流转土地面积图'
              },
              grid: {
                left: '18%',
                // left: '16%',
                // right: '17%',
              },
              xAxis: {
                type: 'value',
                name: "亩",
              },
              yAxis: {
                type: 'category',
                data: villageName.value,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    interval:0,
                    formatter: function (value, index) {
                      return value + '\n{rate|' + villageRate.value[index] + '}' ;
                    },
                    rich: {
                      rate: {
                          fontWeight : 600,
                          // fontSize: 15,
                          // lineHeight:18
                      }
                    }
                }
              },
              series: [{
                  data: villageArea.value,
                  type: 'bar',
                  barWidth: barWidth, // 设置柱子粗细
                  label: {
                      show: true, // 显示标签
                      position: 'right', // 标签的位置
                      // 可以通过 formatter 自定义标签的内容
                      formatter: '{c}' // {c} 表示数据值
                  }
              }]
            };
            myChart.setOption(option);
            loading.close()
          })
      });
  })
})

</script>

<template>
  <div class="TabbarBtn">
    <div id="third-element-introduction">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="详细表单"
        placement="left"
      >
      <div :class="store.activeBtn==5?'iconBox show':'iconBox'" @click="store.activeBtn==5?store.activeBtn=0:store.activeBtn=5">
        <img src="@/assets/image/xian.png" alt="">
      </div>
      </el-tooltip>
    </div>
  </div>
  <div :class="store.activeBtn==5? 'leftTabBox show':'leftTabBox'">
    <div v-show="townflag" id="container3" style="width: 100%;height: 100%"></div>
    <div v-show="!townflag" id="container4" style="width: 100%;height: 100%;"></div>
    <span v-show="!townflag" class="gobackBtn" @click="townflag = true">返回</span>
  </div>
</template>

<style scoped>
.leftTabBox {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100vw;
  height: calc(100vh - 60px);
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-sizing: border-box;
  padding: 30px 20px;
}
.leftTabBox.show{
  bottom: 60px;
}

.leftTabBox .paginationBox {
  position: absolute;
  bottom: 30px;
  left: -40vw;
  display: flex;
  text-align: center;
}

.leftTabBox.show .paginationBox {
  left: 50%;
  transform: translateX(-50%)
}

.gobackBtn {
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
  padding: 5px 15px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
